<script setup>
import {ref} from "vue";
import {getGroupData} from "@/api/mock";
const ListData = [{
    ori:'来源',
    Name:'姓名',
    ID:'工号工号',
    leader:'学院学院',
    number:'电话电话电话',
},
    {
        ori:'来源',
        Name:'姓名',
        ID:'工号工号',
        leader:'学院学院',
        number:'电话电话电话',
    },
    {
        ori:'来源',
        Name:'姓名',
        ID:'工号工号',
        leader:'学院学院',
        number:'电话电话电话',
    },
];
const pageNum=ref(1)
const pageSize =ref(5)
const total =ref(20)
const dialogFormVisible = ref(false);
const titleName = ref('')
const showAddDialog =(title)=>{
    titleName.value = title
    dialogFormVisible.value = true
}
const formData = ref ({
    groupName:'',
    area:'',
    leader:''
})
const getGroupList =()=>{
    getGroupData().then(res=>{
        if (res.status) {
            groupListData.value = res.data.tableData
        }
    })
}
getGroupList()
</script>

<template>
    <div class="header">
        <span>活动广场/活动详细</span>
    </div>
    <el-card >
        <template #header>
            <div class="card-header">
                <span class="info-span1">活动活动活动活动活动活动活动</span>
            </div>
            <div class="card-main">
                <span class="info-span">计划活动时间：2024-07-04 至 2024-07-13</span>
                <span class="info-span">意向前往中学：某某中学</span>
            </div>
            <div class="erweima" style="float: right">
                <img src="@/assets/er.png" class="erweima-1">
                <div class="erweima-2">下载二维码</div>
            </div>
        </template>
        <div class="card-add">
            <el-row style="width: 1000px">
                <el-col :span="6"><div class="blue-circle" style="float: left">
                    <el-icon :size="30"><Avatar /></el-icon>
                </div>
                    <div class="info-text" style="float: right;margin-right:50% ">
                        <span class="info-span2">活动负责人</span>
                        <span class="info-span3">张三</span>
                    </div>
                </el-col>
                <el-col :span="6"><div class="blue-circle" style="float: left">
                    <el-icon :size="30"><LocationFilled /></el-icon>
                </div>
                    <div class="info-text" style="float: right;margin-right:27% ">
                        <span class="info-span2">行政区域地址</span>
                        <span class="info-span3">四川省眉山市彭山区</span>
                    </div>
                </el-col>
            </el-row>
        </div>
    </el-card>
    <!--    活动介绍-->
    <el-card style="margin-top: 20px">
        <el-form inline>
            <el-form-item >
                <img src="@/assets/组%20438.png" class="logo1">
                <div class="logo1-wenzi">活动介绍</div>
            </el-form-item>
            <el-form-item  style="float: right">
                <el-button class="button2" type="primary" @click="showAddDialog('添加活动')">
                    <el-icon class="button2-1"><Plus /></el-icon>
                    <div class="button2-2">编辑</div>
                </el-button>
            </el-form-item>
        </el-form>
        <!--    内容-->
        <el-text class="nr" size="large">活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍
            活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍活动介绍
        </el-text>

    </el-card>
    <!--活动成员表单-->
    <el-card style="margin-top: 20px">
        <el-form inline>
            <el-form-item >
                <img src="@/assets/组%20438.png" class="logo1">
                <div class="logo1-wenzi">活动成员</div>
            </el-form-item>
            <el-form-item style="float: right">
                <el-button class="button1" type="primary" @click="importGroup">导出数据</el-button>
                <el-button class="button2" type="primary" @click="showAddDialog('添加招宣组')">
                    <el-icon class="button2-1"><Plus /></el-icon>
                    <div class="button2-2">编辑成员</div>
                </el-button>
            </el-form-item>
        </el-form>

    <!-- 文章列表1 -->
    <el-table :data="ListData" style="width: 100%">
        <el-table-column type="index" label="序号" width="70" />
        <el-table-column label="来源" width="150"     prop="ori"></el-table-column>
        <el-table-column label="姓名" width="150"     prop="Name"></el-table-column>
        <el-table-column label="学号/工号" width="100" prop="ID"></el-table-column>
        <el-table-column label="学院"                 prop="leader"></el-table-column>
        <el-table-column label="联系电话"              prop="number"></el-table-column>
        <el-table-column prop="op" label="操作" width="180">
            <template #default="{ row }">
                <el-button  size="mini" @click="chakan" >查看</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页条1 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5 ,10, 15]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>
    </el-card>
    <!--活动总结-->
    <el-card style="margin-top: 20px">
        <el-form inline >
            <el-form-item >
                <img src="@/assets/组%20438.png" class="logo1">
                <div class="logo1-wenzi">活动总结</div>
            </el-form-item>
            <el-form-item style="float: right">
                <el-button class="button1" type="primary" @click="importGroup">导出数据</el-button>
                <el-button class="button3" type="primary" @click="showAddDialog('添加招宣组')">
                    <img src="@/assets/倒序.png" class="button3-1">
                    <div class="button3-2">时间倒序</div>
                </el-button>
                <el-button class="button2" type="primary" @click="showAddDialog('添加招宣组')">
                    <el-icon class="button2-1"><Plus /></el-icon>
                    <div class="button2-2">添加总结</div>
                </el-button>
            </el-form-item>
        </el-form>

        <div class="box1">
            <div class="span1" style="margin: 10px 20px">记录于2023.03.21  00:00:00<span style="font-weight: 400;font-size: 14px;text-align: left;color: #000000d9;padding-left: 50px">记录人：</span><span style="width: 24px;height: 24px;background: #3e6ae3;border-radius:50%;color:#fff;font-weight: 400;font-size: 14px;padding: 5px;margin-right: 2px">张</span><span style="font-weight: 400;font-size: 14px;text-align: left;color: #000000d9;">张小白(招办)</span></div>
            <div style="margin: 0px 20px">总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告<br>总结报告总结报告总结报告总结
                报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告<br>总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结
                报告总结报告总结报告总结报告总结<br>报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告</div>
            <br>
            <div style="margin: 0px 10px 20px 10px" class="span3"><el-icon><Link /></el-icon>关联活动：#1000活动标题活动标题活动标题活动标题活动标题</div>
        </div>
        <div class="box1">
            <div class="span1" style="margin: 10px 20px">记录于2023.03.21  00:00:00<span style="font-weight: 400;font-size: 14px;text-align: left;color: #000000d9;padding-left: 50px">记录人：</span><span style="width: 24px;height: 24px;background: #3e6ae3;border-radius:50%;color:#fff;font-weight: 400;font-size: 14px;padding: 5px;margin-right: 2px">张</span><span style="font-weight: 400;font-size: 14px;text-align: left;color: #000000d9;">张小白(招办)</span></div>
            <div style="margin: 0px 20px">总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告<br>总结报告总结报告总结报告总结
                报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告<br>总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结
                报告总结报告总结报告总结报告总结<br>报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告</div>
            <br>
            <div style="margin: 0px 10px 20px 10px" class="span3"><el-icon><Link /></el-icon>关联活动：#1000活动标题活动标题活动标题活动标题活动标题</div>
        </div>
        <div class="box1">
            <div class="span1" style="margin: 10px 20px">记录于2023.03.21  00:00:00<span style="font-weight: 400;font-size: 14px;text-align: left;color: #000000d9;padding-left: 50px">记录人：</span><span style="width: 24px;height: 24px;background: #3e6ae3;border-radius:50%;color:#fff;font-weight: 400;font-size: 14px;padding: 5px;margin-right: 2px">张</span><span style="font-weight: 400;font-size: 14px;text-align: left;color: #000000d9;">张小白(招办)</span></div>
            <div style="margin: 0px 20px">总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告<br>总结报告总结报告总结报告总结
                报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告<br>总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结
                报告总结报告总结报告总结报告总结<br>报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告总结报告</div>
            <br>
            <div style="margin: 0px 10px 20px 10px" class="span3"><el-icon><Link /></el-icon>关联活动：#1000活动标题活动标题活动标题活动标题活动标题</div>
        </div>

        <!-- 分页条4 -->
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5 ,10, 15]"
                       layout="jumper, total, sizes, prev, pager, next" background :total="total"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>

    </el-card>
    <!--  活动照片-->
    <el-card style="margin-top: 20px">
        <el-form inline >
            <el-form-item >
                <img src="@/assets/组%20438.png" class="logo1">
                <div class="logo1-wenzi">活动图片</div>
            </el-form-item>
            <el-form-item style="float: right">
                <el-button class="button1" type="primary" @click="importGroup">导出数据</el-button>
                <el-button class="button3" type="primary" @click="showAddDialog('添加招宣组')">
                    <img src="@/assets/倒序.png" class="button3-1">
                    <div class="button3-2">时间倒序</div>
                </el-button>
                <el-button class="button2" type="primary" @click="showAddDialog('添加招宣组')">
                    <el-icon class="button2-1"><Plus /></el-icon>
                    <div class="button2-2">添加总结</div>
                </el-button>
            </el-form-item>
        </el-form>

        <div class="box1">
            <div class="span1" style="margin: 10px 20px">记录于2023.03.21  00:00:00<span style="font-weight: 400;font-size: 14px;text-align: left;color: #000000d9;padding-left: 50px">记录人：</span><span style="width: 24px;height: 24px;background: #3e6ae3;border-radius:50%;color:#fff;font-weight: 400;font-size: 14px;padding: 5px;margin-right: 2px">张</span><span style="font-weight: 400;font-size: 14px;text-align: left;color: #000000d9;">张小白(招办)</span></div>
            <img
                src="@/assets/图片.jpg"
                style="width: 200px;height: 112.5px;margin-left: 30px"
            />
            <img
                src="@/assets/图片.jpg"
                style="width: 200px;height: 112.5px;margin-left: 30px"
            />
            <img
                src="@/assets/图片.jpg"
                style="width: 200px;height: 112.5px;margin-left: 30px"
            />
            <div style="margin: 0px 10px 20px 10px" class="span3"><el-icon><Link /></el-icon>关联活动：#1000活动标题活动标题活动标题活动标题活动标题</div>
        </div>
        <div class="box1">
            <div class="span1" style="margin: 10px 20px">记录于2023.03.21  00:00:00<span style="font-weight: 400;font-size: 14px;text-align: left;color: #000000d9;padding-left: 50px">记录人：</span><span style="width: 24px;height: 24px;background: #3e6ae3;border-radius:50%;color:#fff;font-weight: 400;font-size: 14px;padding: 5px;margin-right: 2px">张</span><span style="font-weight: 400;font-size: 14px;text-align: left;color: #000000d9;">张小白(招办)</span></div>
            <img
                src="@/assets/图片.jpg"
                style="width: 200px;height: 112.5px;margin-left: 30px"
            />
            <img
                src="@/assets/图片.jpg"
                style="width: 200px;height: 112.5px;margin-left: 30px"
            />
            <img
                src="@/assets/图片.jpg"
                style="width: 200px;height: 112.5px;margin-left: 30px"
            />
            <div style="margin: 0px 10px 20px 10px" class="span3"><el-icon><Link /></el-icon>关联活动：#1000活动标题活动标题活动标题活动标题活动标题</div>
        </div>
        <!-- 分页条4 -->
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5 ,10, 15]"
                       layout="jumper, total, sizes, prev, pager, next" background :total="total"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>
    </el-card>
    <!--活动视频-->
    <el-card style="margin-top: 20px">
        <el-form inline >
            <el-form-item >
                <img src="@/assets/组%20438.png" class="logo1">
                <div class="logo1-wenzi">活动视频</div>
            </el-form-item>
            <el-form-item style="float: right">
                <el-button class="button1" type="primary" @click="importGroup">导出数据</el-button>
                <el-button class="button3" type="primary" @click="showAddDialog('添加招宣组')">
                    <img src="@/assets/倒序.png" class="button3-1">
                    <div class="button3-2">时间倒序</div>
                </el-button>
                <el-button class="button2" type="primary" @click="showAddDialog('添加招宣组')">
                    <el-icon class="button2-1"><Plus /></el-icon>
                    <div class="button2-2">添加总结</div>
                </el-button>
            </el-form-item>
        </el-form>

        <div class="box1">
            <div class="span1" style="margin: 10px 20px">记录于2023.03.21  00:00:00<span style="font-weight: 400;font-size: 14px;text-align: left;color: #000000d9;padding-left: 50px">记录人：</span><span style="width: 24px;height: 24px;background: #3e6ae3;border-radius:50%;color:#fff;font-weight: 400;font-size: 14px;padding: 5px;margin-right: 2px">张</span><span style="font-weight: 400;font-size: 14px;text-align: left;color: #000000d9;">张小白(招办)</span></div>
            <video
                src="@/assets/sp.mp4"
                style="width: 200px;height: 112.5px;margin-left: 30px"
            />
            <video
                src="@/assets/sp.mp4"
                style="width: 200px;height: 112.5px;margin-left: 30px"
            />
            <video
                src="@/assets/sp.mp4"
                style="width: 200px;height: 112.5px;margin-left: 30px"
            />
            <div style="margin: 0px 10px 20px 10px" class="span3"><el-icon><Link /></el-icon>关联活动：#1000活动标题活动标题活动标题活动标题活动标题</div>
        </div>
        <div class="box1">
            <div class="span1" style="margin: 10px 20px">记录于2023.03.21  00:00:00<span style="font-weight: 400;font-size: 14px;text-align: left;color: #000000d9;padding-left: 50px">记录人：</span><span style="width: 24px;height: 24px;background: #3e6ae3;border-radius:50%;color:#fff;font-weight: 400;font-size: 14px;padding: 5px;margin-right: 2px">张</span><span style="font-weight: 400;font-size: 14px;text-align: left;color: #000000d9;">张小白(招办)</span></div>
            <video
                src="@/assets/sp.mp4"
                style="width: 200px;height: 112.5px;margin-left: 30px"
            />
            <video
                src="@/assets/sp.mp4"
                style="width: 200px;height: 112.5px;margin-left: 30px"
            />
            <video
                src="@/assets/sp.mp4"
                style="width: 200px;height: 112.5px;margin-left: 30px"
            />
            <div style="margin: 0px 10px 20px 10px" class="span3"><el-icon><Link /></el-icon>关联活动：#1000活动标题活动标题活动标题活动标题活动标题</div>
        </div>
        <!-- 分页条4 -->
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[5 ,10, 15]"
                       layout="jumper, total, sizes, prev, pager, next" background :total="total"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>
    </el-card>
    <!--附件-->
    <el-card style="margin-top: 20px">
        <el-form inline >
            <el-form-item >
                <img src="@/assets/组%20438.png" class="logo1">
                <div class="logo1-wenzi">附件</div>
            </el-form-item>
        </el-form>
        <div class="box1">
            <div class="span1" style="margin: 10px 20px">记录于2023.03.21  00:00:00<span style="font-weight: 400;font-size: 14px;text-align: left;color: #000000d9;padding-left: 50px">记录人：</span><span style="width: 24px;height: 24px;background: #3e6ae3;border-radius:50%;color:#fff;font-weight: 400;font-size: 14px;padding: 5px;margin-right: 2px">张</span><span style="font-weight: 400;font-size: 14px;text-align: left;color: #000000d9;">张小白(招办)</span></div>
            <div style="margin: 0px 10px 20px 10px" class="span3"><el-icon><Link /></el-icon>文档文档文档文档文档文档文档文档文档文档文档文档.docx</div>
            <div style="margin: 0px 10px 20px 10px" class="span3"><el-icon><Link /></el-icon>文档文档文档文档文档文档文档.docx</div>
        </div>
        <el-row class="aa1" >
            <el-col :span="1" style="margin-bottom: 8px;margin-left: 20px">
                <div style="width: 9px;height: 9px;background: #fff;border: 5px solid #266eff;border-radius: 30px"></div>
                <div style="width: 0;height: 60px;background: transparent;border: 1px solid #236cff;margin-left: 7px;margin-top: 4px"></div>
            </el-col>
            <el-col :span="20" style="height: 10px;">
                <div class="span4">2023-03-24 17:23:35</div>
                <el-row class="aa1" style="margin-top: 20px">
                    <el-col :span="1" style="margin-bottom: 20px" class="span5">
                        由
                    </el-col>
                    <el-col :span="2" class="span5-2">
                        张三
                    </el-col>
                    <el-col :span="2" class="span5">发布活动</el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-row class="aa1" >
            <el-col :span="1" style="margin-bottom: 8px;margin-left: 20px">
                <div style="width: 9px;height: 9px;background: #fff;border: 5px solid #266eff;border-radius: 30px"></div>
                <div style="width: 0;height: 70px;background: transparent;border: 1px solid #236cff;margin-left: 7px;margin-top: 4px"></div>
            </el-col>
            <el-col :span="20" style="height: 10px;">
                <div class="span4">2023-03-24 17:23:35</div>
                <el-row class="aa1" style="height: 20px;margin-top: 5px">
                    <el-col :span="1" style="margin-bottom: 20px" class="span5">
                        由
                    </el-col>
                    <el-col :span="2" class="span5-2">
                        张三
                    </el-col>
                    <el-col :span="2" class="span5">发布活动</el-col>
                </el-row>
                <div class="span4-2" style="margin: 0px 0px 0px 0">王二；100001；某某某某某单位；某职称；四川省；某中学；10086</div>
            </el-col>
        </el-row>
    </el-card>
    <!--抽屉-->
    <el-drawer v-model="dialogFormVisible" direction="rtl">
        <template #title>
            <h4>{{titleName}}</h4>
        </template>
        <template #default>
            <el-form ref="form" :model="formData"  label-position="top" :rules="rules">
                <el-form-item label="活动名称" label-width="180"  prop="username">
                    <el-input v-model="formData.groupName" autocomplete="off" placeholder="请输入活动名称" />
                </el-form-item>
                <el-form-item label="活动内容" label-width="180" prop="email">
                    <el-input v-model="formData.area" autocomplete="off" placeholder="请输入活动内容" />
                </el-form-item>
                <el-form-item label="联系电话" label-width="180" prop="gender">
                    <el-input v-model="formData.leader" autocomplete="off" placeholder="请输入联系电话" />
                </el-form-item>
            </el-form>
        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmClick">确定</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<style scoped lang="scss">
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}
.card-header{
    margin-bottom: 10px;
}
.info-span {
    margin-right:50px;
}
.info-span1 {
    font-weight: bold;
    font-size: 30px;
}
.info-span2 {
    margin-bottom: 5px;
    display: block;
    font-size: 13px;
}
.info-span3 {
    font-weight: bold;
    font-size: 13px;
}
.card-add {
    display: flex;
    align-items: center;
}
.blue-circle {
    width: 43px;
    height: 43px;
    background-color: #236CFF;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}
.el-icon{
    color: #fff;
}
.el-row {
    margin-bottom: 200px;
}
.aa1 {
    margin-bottom: 0px;
}
.el-row:last-child {
    margin-bottom: 0;
}
.el-col {
    border-radius: 200px;
}

.box1{
    border-left-color:#236cff;
    border-style: solid;
    border-right-color:#f5f8ff;
    border-top-color:#f5f8ff;
    border-bottom-color:#f5f8ff;
    border-width: 3px;
    margin-top: 20px;
    width: 1571px;
    height: 210px;
    border-radius: 4px;
    background: #f5f8ff;
    //border: 1px solid #f5f8ff ;
}
.span1{
    font-family: "Source Han Sans SC Bold";
    font-weight: 700;
    font-size: 18px;
    text-align: left;
    color: #000000d9;
}
.span3{
    width: 447px;
    height: 28px;
    border-radius: 14px;
    background: #c6d9ff;
    border: 1px solid #c6d9ff;
    font-family: "Source Han Sans SC";
    font-weight: 400;
    font-size: 14px;
    padding-top: 4px;
    text-align: center;
    color: #236cff;
}
.span4{
    font-family: "Source Han Sans SC Medium";
    font-weight: 500;
    font-size: 16px;
    text-align: left;
    color: #000;
}
.span5{
    width: 188px;
    height: 10px;
    background: transparent;
    text-align: center;
}
.span5-2{
    width: 200px;
    height: 24px;
    text-align: center;
    border-radius: 12px;
    background: #bfd4fa;
    margin: 0px 10px;
}

.span4-2{
    font-family: "Source Han Sans SC";
    font-weight: 400;
    font-size: 16px;
    text-align: left;
    color: #6f6f6f;
}
.span6{
    font-family: "Source Han Sans SC Medium";
    font-weight: 500;
    font-size: 16px;
    padding-top: 15px;
    padding-left: 90px;
    color: #6f6f6f;
}
</style>